<template>
  <div class="yijian">
    <div class="mar">
      <div class="header">
        <div>
          <el-input @input="search2" placeholder="请输入内容" v-model="input1" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
        <div style="margin-left: 30px;">
          <el-date-picker @blur="aaa" style="position: relative;top: 50%;transform: translateY(-50%);" v-model="value1"
            type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="con-table">
        <el-table ref="multipleTable" border
          :data="tableData2 ? tableData2.slice((currentPage - 1) * pageSize, currentPage * pageSize) : [].slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column v-if="state == '反馈'" align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column v-if="state == '反馈'" align="center" label="反馈人" width="120">
            <template slot-scope="scope">{{ scope.row.fankuser }}</template>
          </el-table-column>
          <el-table-column v-if="state == '反馈'" align="center" label="提供图片" width="120">
            <template slot-scope="scope"><img width="50px" :src="scope.row.imgs" alt=""></template>
          </el-table-column>
          <el-table-column v-if="state == '反馈'" align="center" label="问题类型" width="120">
            <template slot-scope="scope">{{ scope.row.wttype }}</template>
          </el-table-column>
          <el-table-column v-if="state == '反馈'" align="center" label="问题描述" width="120">
            <template slot-scope="scope">{{ scope.row.wttext }}</template>
          </el-table-column>
          <el-table-column v-if="state == '反馈'" align="center" label="用户联系方式" width="120">
            <template slot-scope="scope">{{ scope.row.yhphone }}</template>
          </el-table-column>
          <el-table-column v-if="state == '反馈'" :formatter='formatTime' prop="tjtime" align="center" label="提交时间">
          </el-table-column>
          <el-table-column v-if="state == '合作'" align="center" label="姓名" width="120">
            <template slot-scope="scope">{{ scope.row.fankuser }}</template>
          </el-table-column>
          <el-table-column v-if="state == '合作'" align="center" label="手机号" width="120">
            <template slot-scope="scope">{{ scope.row.yhphone }}</template>
          </el-table-column>
          <el-table-column v-if="state == '合作'" align="center" label="合作想法" width="120">
            <template slot-scope="scope">{{ scope.row.xiangfa }}</template>
          </el-table-column>
          <el-table-column v-if="state == '合作'" align="center" label="营业执照" width="120">
            <template slot-scope="scope"><img width="50px" :src="scope.row.imgs" alt=""></template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope"><span @click="dele(scope.row.id)">删除</span></template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" :total="tableData2.length ? tableData2.length : 0" />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { deleteYiJianDjm, getYiJianDjm,deleteHeZuoDjm,getHeZuoDjm } from '../../utils/api'
export default {
  data() {
    return {
      value1: '',
      input1: '',
      newA: [],
      tableData2: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 4,
    }
  },
  props: {
    tableData: {
      type: Array
    },
    state: {
      String
    }
  },
  watch: {
    tableData(newn, load) {
      this.newA = [...newn]
      this.tableData2 = [...newn]
    }
  },
  methods: {
    dele(id) {
      if (this.state == '反馈') {
        deleteYiJianDjm(id).then(res => {
          this.render()
        })
      } else {
        console.log(id);
        deleteHeZuoDjm(id).then(res => {
          this.render()
        })
      }
    },
    search() {
      this.tableData2 = this.newA.filter(item => {
        if (this.statee) {
          if (this.input1 != '') {
            if (item.fankuser.includes(this.input1) && Number(new Date(item.tjtime)) >= this.value1[0] && Number(new Date(item.tjtime)) <= this.value1[1]) {
              return item
            }
          } else {
            if (Number(new Date(item.tjtime)) >= this.value1[0] && Number(new Date(item.tjtime)) <= this.value1[1]) {
              return item
            }
          }
        } else {
          if (item.fankuser.includes(this.input1)) {
            return item
          }
        }
      })
    },
    search2() {
      if (this.input1 == '') {
        this.tableData2 = this.newA
      }
    },
    formatTime(row, column) {
      let date = row[column.property];
      if (date === undefined) {
        return ''
      }
      return moment(date, moment.ISO_8601).format("YYYY-MM-DD")
    },
    aaa() {
      if (this.value1 != '') {
        this.statee = true
        this.value1 = this.value1.map(item => {
          item = Number(item)
          return item
        })
      }
    },
    handleSizeChange2(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSelectionChange() {

    },
    render() {
      if(this.state=='反馈'){
        getYiJianDjm().then(res => {
        this.tableData2 = res.data.data
        this.newA = [...this.tableData2]
      })
      }else{
        getHeZuoDjm().then(res => {
        this.tableData2 = res.data.data
        this.newA = [...this.tableData2]
      })
      }
    }
  }
}
</script>

<style scoped>
.yijian {
  width: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  display: flex;
}

.mar {
  width: 95%;
  margin: 20px auto;
}

.con-table {
  width: 100%;
  margin-top: 20px;
}
</style>